<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="div">这是一段测试文本</div>


  <button id="btn1">click1</button>

  <script>
    var div = document.getElementsByClassName('div')[0]
    var btn1 = document.getElementById('btn1')

    div.style.color = 'red'
    div.style.opacity = '0.5'
    div.style.fontSize = '30px'

    console.log(div)

    console.log(btn1)

    // 点击事件
    btn1.onclick = function (e) {
      // e --- 事件对象
      console.log('按钮被点击了')
      this.style.fontSize = '30px'

      console.log(e.target)
      console.log(e.target === this)
    }

    // hover --- 鼠标移入事件
    btn1.onmouseover = function (e) {
      console.log('鼠标移入了')
    }

    // 鼠标移出事件
    btn1.onmouseleave = function (e) {
      console.log('鼠标移出了')
    }

    // 鼠标移动事件
    // btn1.onmousemove = function (e) {
    //   console.log(e, this)
    // }

    // 鼠标按下事件
    btn1.onmousedown = function () {
      console.log('鼠标按下了')
    }

    document.onkeydown = function (e) {
      console.log(e)
      console.log(e.keyCode)

      if (e.keyCode === 13) {
        console.log('回车键被按下了')
      }
    }
  </script>
</body>
</html>